<template>
  <div class="setinfo">
    <header-com title="个人资料" moduleName="match"></header-com>
    <div class="pic-box">
      <div class="pic">
        <input type="file" name="" v-on:change="change($event)" class="upload" />
        <van-uploader><van-icon name="photograph" /></van-uploader>
        <img :src="user.img" alt="" class="img_url" />
      </div>
    </div>
    <van-cell-group>
      <van-cell title="真实姓名" class="cell van-cell--required">
        <template slot="">
          <van-field class="input" v-model.trim="user.name" maxlength="8" placeholder="请输入真实姓名" clearable input-align="right" />
        </template>
      </van-cell>
      <van-cell title="出生日期" is-link class="cell van-cell--required" @click="onbirth">
        <template slot="">
          <span style="float: right;">{{ user.date_of_birth }}</span>
        </template>
      </van-cell>
      <van-cell title="身高" class="cell van-cell--required">
        <template slot="">
          <span style="float: right;">cm</span>
          <van-field class="short-input" type="number" v-model="user.height" maxlength="3" placeholder="请输入" input-align="right" />
        </template>
      </van-cell>
      <van-cell title="体重" class="cell van-cell--required">
        <template slot="">
          <span style="float: right;">Kg</span>
          <van-field class="short-input" type="number" v-model="user.weight" maxlength="3" placeholder="请输入" input-align="right" />
        </template>
      </van-cell>
      <van-cell title="手机号码" class="cell van-cell--required">
        <template slot="">
          <van-field class="long-input" disabled v-model="user.phone" maxlength="11" input-align="right" />
        </template>
      </van-cell>
      <van-cell title="证件类型" is-link class="cell van-cell--required" @click="show = true">
        <template slot="">
          <span v-if="user.card_type == 0">身份证</span>
          <span v-if="user.card_type == 1">其他证件</span>
        </template>
      </van-cell>
      <van-cell title="性别" class="cell van-cell--required">
        <template slot="">
          <div class="select-box">
            <div :class="{ activeSex: user.sex == '0' }" @click="selectSex(0)">
              <i class="iconfont icon-nan "></i>
              <span>男</span>
            </div>
            <div :class="{ activeSex: user.sex == '1' }" style="margin-left: 0.5rem" @click="selectSex(1)">
              <i class="iconfont icon-nv "></i>
              <span>女</span>
            </div>
          </div>
        </template>
      </van-cell>
      <van-cell title="证件号" class="cell van-cell--required">
        <template slot="">
          <van-field class="long-input" v-model="user.id_card" clearable placeholder="请输入" input-align="right" />
        </template>
      </van-cell>
      <van-cell title="持拍方式" is-link class="cell van-cell--required" @click="show1 = true">
        <template slot="">
          <span>{{ user.reverse_pat == '' || user.reverse_pat == null ? '请选择' : user.reverse_pat }}</span>
        </template>
      </van-cell>
      <div class="van-actionsheet" v-show="current" style="z-index: 2007;">
        <van-datetime-picker v-model="currentDate" type="date" :min-date="minDate" @confirm="confirm" @cancel="cancel" class="van-actionsheet" style="z-index: 2007;" />
        <div class="van-overlay" style="z-index: 2006;" @click="current = false"></div>
      </div>
    </van-cell-group>
    <div class="conform" @click="submit">提交</div>
    <van-actionsheet v-model="show" :actions="actions" @select="onSelect" />
    <van-actionsheet v-model="show1" :actions="actions1" @select="onSelects" />
  </div>
</template>
<script>
import { Uploader } from 'vant';
import { Actionsheet } from 'vant';
import { DatetimePicker } from 'vant';
import { Toast } from 'vant';
import { Dialog } from 'vant';
export default {
  data() {
    return {
      user: {
        id: '',
        img: '',
        name: '',
        date_of_birth: '0000-00-00',
        height: '',
        weight: '',
        card_type: '',
        id_card: '',
        reverse_pat: '',
        list: [],
        sex: 0
      },
      check: false,
      minDate: new Date(1950, 1, 1),
      currentDate: new Date(),
      current: false,
      show: false,
      show1: false,
      actions: [
        {
          name: '身份证',
          type: 0
        },
        {
          name: '其他证件',
          type: 1
        }
      ],
      actions1: [
        {
          name: '右手持拍-单手反拍'
        },
        {
          name: '右手持拍-双手反拍'
        },
        {
          name: '左手持拍-单手反拍'
        },
        {
          name: '左手持拍-双手反拍'
        },
        {
          name: '双正双反'
        }
      ]
    };
  },
  components: {},
  mounted() {
    this.com_setInfo();
  },
  methods: {
    selectSex(type) {
      this.user.sex = type;
    },
    changePhone() {
      this.$router.push('/user/register');
    },
    com_setInfo() {
      //   var self = this
      this.$axios
        .get('/mobile/v1/PersonalCenter/my_info', {
          headers: {
            token: window.sessionStorage.getItem('token')
          }
        })
        .then(res => {
          if (res.data.code == 2000) {
            this.user = res.data.data.user_info;
            this.$store.dispatch('SET_USERINFO', res.data.data.user_info);
          }
        })
        .catch(res => {});
    },
    submit() {
      Dialog.confirm({
        title: '提示',
        message: '请确认真实姓名, 无误则确认提交即可',
        showCancelButton: false
      })
        .then(() => {
          const check = this.checked();
          console.log(check);
          if (check) {
            var params = new URLSearchParams();
            params.append('id', this.user.id);
            params.append('img', this.user.img);
            params.append('name', this.user.name);
            params.append('date_of_birth', this.user.date_of_birth);
            params.append('height', this.user.height);
            params.append('weight', this.user.weight);
            params.append('card_type', this.user.card_type);
            params.append('id_card', this.user.id_card);
            params.append('reverse_pat', this.user.reverse_pat);
            params.append('sex', this.user.sex);
            this.$axios
              .post('/mobile/v1/PersonalCenter/my_info', params, {
                headers: {
                  token: window.sessionStorage.getItem('token')
                }
              })
              .then(res => {
                if (res.data.code == 2000) {
                  this.$store.dispatch('SET_AGE', this.user.date_of_birth);
                  this.$store.dispatch('SET_USERINFO', this.user);
                  localStorage.setItem('userInfo', JSON.stringify(this.user));
                  Toast(res.data.msg);
                  let isCompletedInfo = sessionStorage.getItem('isCompletedInfo')
                  if (isCompletedInfo) {
                    sessionStorage.removeItem("isCompletedInfo");
                    this.$router.push({
                      path: '/match/apply',
                      query: {
                        id: isCompletedInfo
                      }
                    });
                  } else {
                    this.$router.push({
                      path: '/mine'
                    });
                  }
                } else {
                  Toast(res.data.msg);
                }
              })
              .catch(res => {});
          }
        })
        .catch(() => {});
    },
    checked() {
      if (this.user.name == '' || this.user.name == undefined || this.user.name == null) {
        Toast('请输入姓名！');
        this.check = false;
        return false;
      }
      if (this.user.height == '' || this.user.height == undefined || this.user.height == null) {
        Toast('请输入身高！');
        this.check = false;
        return false;
      }
      if (this.user.weight == '' || this.user.weight == undefined || this.user.weight == null) {
        Toast('请输入体重！');
        this.check = false;
        return false;
      }
      if (this.user.id_card == '' || this.user.id_card == undefined || this.user.id_card == null) {
        Toast('请输入证件号！');
        this.check = false;
        return false;
      }
      if (this.user.date_of_birth == '' || this.user.date_of_birth == undefined || this.user.date_of_birth == null) {
        Toast('请输入出生日期！');
        this.check = false;
        return false;
      }
      if (this.user.reverse_pat == '' || this.user.reverse_pat == undefined || this.user.reverse_pat == null) {
        Toast('请输入持拍方式！');
        this.check = false;
        return false;
      }
      this.check = true;
      return true
    },
    onSelect(item) {
      this.user.id_card = '';
      if (item.type == 0) {
        this.user.sex = null;
      }
      this.show = false;
      // this.actions[0].name = item.name;
      this.user.card_type = item.type;
      console.log(item);
    },
    onSelects(item) {
      this.show1 = false;
      // this.actions1[0].name = item.name;
      this.user.reverse_pat = item.name;
      console.log(item);
    },
    onbirth() {
      this.current = true;
    },
    confirm(value) {
      let date = this.currentDate;
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let strDate = date.getDate();
      this.user.date_of_birth = year + '-' + month + '-' + strDate;
      this.current = false;
    },
    cancel() {
      this.current = false;
    },
    change(e) {
      let img1 = e.target.files[0];
      let form = new FormData();
      form.append('file', img1, img1.name);
      this.$axios
        .post('/mobile/v1/event/img', form)
        .then(res => {
          if (res.data.code == 200) {
            this.user.img = res.data.data;
            Toast('上传图片成功');
          } else {
            Toast(res.data.msg);
          }
        })
        .catch(res => {
          //  console.log(res.msg);
        });
    }
  }
};
</script>
<style lang="less" scoped>
.cell {
  text-align: left;

  .select-box {
    display: flex;
    justify-content: flex-end;
  }

  .iconfont {
    margin-right: 0.1rem;
    font-size: 0.34rem;
  }

  .activeSex {
    color: #42b574;
  }
}

.upload {
  height: 1.4rem;
  width: 1.4rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  opacity: 0;
}

.van-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 18px;
  color: #fff;
  height: 0.6rem;
  width: 0.6rem;
  border-radius: 50%;
  background: #42b574;
  line-height: 0.6rem;
}

.img_url {
  display: inline-block;
  height: 1.4rem;
  width: 1.4rem;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  border: none;
}

.van-uploader {
  height: 1.4rem;
  width: 1.4rem;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
}

.van-uploader__input {
  border-radius: 50%;
  border: none;
  background: transparent;
}

.conform {
  // font-size: 0.4rem;
  font-weight: 700;
  width: 50%;
  margin: 0 auto;
  background: #42b572;
  color: #fff;
  margin-top: 0.4rem;
  padding: 0.2rem 0;
}

.setinfo {
  margin-bottom: 1.1rem;
}

.pic-box {
  display: flex;
  justify-content: center;
  padding: 0.3rem 0.5rem;

  .pic {
    height: 1.4rem;
    width: 1.4rem;
    border: 0.04rem solid #42b574;
    border-radius: 50%;
    position: relative;

    input {
      border: none;
    }
  }
}

.cell {
  background-color: #f6f6f6;
  text-align: left;
}

.input {
  background: #f6f6f6;
  padding: 0;
  float: right;
  width: 2rem;
}
.van-cell--required::before {
  content: '*';
  position: absolute;
  left: 7px;
  font-size: 14px;
  color: #f44;
}

.short-input {
  background: #f6f6f6;
  padding: 0;
  float: right;
  width: 1rem;
}

.long-input {
  background: #f6f6f6;
  padding: 0;
  float: right;
  width: 3rem;
}
</style>
